import { Meta, Subtitle } from "@storybook/addon-docs/blocks";
import * as ImageStories from "./index.stories";

<Meta of={ImageStories} />

# Image embeds examples

<Subtitle>A list of examples for image embedding.</Subtitle>

- [Basic embedding](#basic-embedding)
- [Embed with import](#embed-with-import)
- [Setting scale and offset](#setting-scale-and-offset)

## Basic embedding

To simply embed an image, put an URL of the image to an `url` option.

[Example](/story/docs-image-examples--embed-image)

```js
// myStories.stories.jsx
export const myStory = () => <MyComponent />;

myStory.parameters = {
  design: {
    type: "image",
    url: "https://raw.githubusercontent.com/storybookjs/brand/master/logo/logo-storybook-default.svg",
  },
};
```

## Embed with import

You can also use webpack's loader to include images.
These files will be included in the final Storybook bundle.

[Example](/story/docs-image-examples--embed-image-with-import)

```js
// myStories.stories.jsx
import sampleImage from "/path/to/image.png";

export const myStory = () => <MyComponent />;

myStory.parameters = {
  design: {
    type: "image",
    url: sampleImage,
  },
};
```

## Setting scale and offset

You can tweak the default preview viewport by providing scale and offset values.

[Example](/story/docs-image-examples--set-scale-and-offset)

```js
// myStories.stories.jsx
import sampleImage from "/path/to/image.png";

export const myStory = () => <MyComponent />;

myStory.parameters = {
  design: {
    type: "image",
    url: sampleImage,
    offset: [-300, 140],
    scale: 2,
  },
};
```
